<template>
    <section class="product-detail-main base-main">
      <!--快捷菜单-->
      <div class="nav line-top line-bottom">
        <van-row>
          <van-col span="6">
            <span @click="handleJ(1,'#lunbo')">
              <i v-if="jupmNum == 1" class="color7E82F6 iconfont icondizhibiaoshix"></i>
              商品
            </span>
          </van-col>
          <van-col span="6">
            <span @click="handleJ(2,'#reviews')">
              <i v-if="jupmNum == 2" class="color7E82F6 iconfont icondizhibiaoshix"></i>
              评价
            </span>
          </van-col>
          <van-col span="6">
            <span @click="handleJ(3,'#recommended')">
              <i v-if="jupmNum == 3" class="color7E82F6 iconfont icondizhibiaoshix"></i>
              推荐
            </span>
          </van-col>
          <van-col span="6">
            <span @click="handleJ(4,'#details')">
              <i v-if="jupmNum == 4" class="color7E82F6 iconfont icondizhibiaoshix"></i>
              详情
            </span>
          </van-col>
        </van-row>
      </div>
      <!--快捷菜单-->

      <!--轮播图-->
      <div class="lunbo pr" id="lunbo scroll0">
        <van-swipe :autoplay=autoPlay>
          <van-swipe-item v-for="(src, index) in imgList" :key="index">
            <img v-lazy="src.path" />
          </van-swipe-item>
          <div class="custom-indicator pa text-c" slot="indicator">
            {{ current + 1 }}/{{imgList.length}}
          </div>
        </van-swipe>
      </div>
      <!--轮播图-->

      <!--头部-->
      <div class="title bgcFFF">
        <!--正常进入-->
        <div class="price" v-if="!seckill">
          <p><i>￥</i>{{price}} <del>￥{{original_price}}</del></p>
        </div>
        <!--正常进入-->

        <!--秒杀进入-->
        <div class="seckill" v-if="seckill">
          <van-row>
            <van-col span="16">
              <div class="seckill-price">
                <van-row>
                  <van-col span="12">
                    <span class="price-now"><i>￥</i>200</span>
                  </van-col>
                  <van-col span="12">
                    <p class="price-old">
                      <del>￥300.00</del>
                      <span>已抢246件</span>
                    </p>
                  </van-col>
                </van-row>
              </div>
            </van-col>

            <van-col span="8">
              <div class="time">
                <p>距结束还剩</p>
                <p>
                  <span>08</span> :
                  <span>24</span> :
                  <span>06</span>
                </p>
              </div>
            </van-col>
          </van-row>
        </div>
        <!--秒杀进入-->
        <div class="box">
          <span class="name w80 clamp2">
            {{product_name}}
          </span>
          <span class="share w10 text-c">
            <i class="iconfont iconshangpinfenxiangtubiaox"></i>
            <span>分享</span>
          </span>
        </div>

      </div>
      <!--头部-->

      <!--单元格-->
      <ul class="cell-box bgcFFF mt10">
        <li @click="hanldeShowCouponPop">
          <van-row>
            <van-col span="3">
              领券
            </van-col>
            <van-col span="15">
              领券可省140元
            </van-col>
            <van-col span="6" class="text-r colorFF904A">
              领券
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </li>
        <li>
          <van-row>
            <van-col span="3">
              优惠
            </van-col>
            <van-col span="20">
              购买可得0积分
            </van-col>
            <van-col span="1">
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </li>
        <li @click="hanldeShowPop">
          <van-row>
            <van-col span="3">
              选择
            </van-col>
            <van-col span="20">
              黑色，1件
            </van-col>
            <van-col span="1">
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </li>
        <li>
          <van-row>
            <van-col span="3">
              送至
            </van-col>
            <van-col span="20">
              <i class="iconfont icondizhibiaoshix"></i> 地址
            </van-col>
            <van-col span="1">
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </li>
        <li @click="handleArguments">
          <van-row>
            <van-col span="3">
              参数
            </van-col>
            <van-col span="20">
              产品参数一 产品参数二 产品参数三
            </van-col>
            <van-col span="1">
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </li>
      </ul>
      <!--单元格-->

      <!--商品评价-->
      <div class="reviews bgcFFF mt10" id="reviews scroll1">
        <div class="title line-bottom" @click="handleToReviews">
          <van-row>
            <van-col span="4">
              商品评价
            </van-col>
            <van-col span="15">
              ({{reviews.total}})
            </van-col>
            <van-col span="4">
              查看全部
            </van-col>
            <van-col span="1">
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>

          <div class="target" @click="handleToReviews">
            <span v-for="item in reviews.list">{{item.text}}</span>
          </div>
        </div>

        <div class="reviews-one">
          <van-row>
            <van-col span="2">
              <img class="head" :src="reviews.msg.img" alt="">
            </van-col>
            <van-col span="12">
              {{reviews.msg.name}}
            </van-col>
            <van-col span="10" class="text-r">
              <van-rate
                v-model="reviews.msg.rate"
                :size="16"
                color="#7E82F6"
                void-color="#EFEEEB"
                readonly
              />
              <!--<van-rate-->
                <!--v-model="reviews.msg.rate"-->
                <!--:size="16"-->
                <!--icon="iconfont icondagou1"-->
                <!--void-icon="iconfont iconshoucang-weidianjix"-->
                <!--color="#7E82F6"-->
                <!--void-color="#EFEEEB"-->
                <!--readonly-->
              <!--/>-->
            </van-col>
          </van-row>
          <p class="review-text">{{reviews.msg.review}}</p>
          <p class="review-img">
            <img @click="handleImgPreview(index)" v-lazy="item.src" alt="" v-for="(item,index) in reviews.msg.imgList" :key="index">
          </p>
          <p class="model">
            {{reviews.msg.model}}
          </p>
        </div>
      </div>
      <!--商品评价-->

      <!--为你推荐-->
      <div class="recommended bgcFFF mt10" id="recommended scroll2">
        <div class="title" @click="handleToRecommendProductList">
          <van-row>
            <van-col span="19">
              为你推荐
            </van-col>
            <van-col span="4">
              查看全部
            </van-col>
            <van-col span="1">
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </div>

        <div class="product-box">
          <div v-for="(item,index) in recommended" :key="index" @click="handleToProduct(item)">
            <img :src="item.product_img" alt="">
            <p class="clamp2">{{item.name}}</p>
            <span>￥{{item.discount_price}}</span>
          </div>
        </div>
      </div>
      <!--为你推荐-->

      <!--商品详情-->
      <div class="product-details bgcFFF mt10" v-html="productDetails" id="details scroll3">
        135465321321
      </div>
      <!--商品详情-->

     <!--商品导航-->
      <div class="goods-action bgcFFF line-top">
        <van-row>
          <van-col span="3">
            <p class="icon_" @click="handleCollect">
              <i class="icon_collect iconfont" :class="isCollect ? 'iconshoucang-dianjix' : 'iconshoucang-weidianjix'" :style="collectStyle"></i>
              <span>{{collectText}}</span>
            </p>
          </van-col>
          <van-col span="2">
            <p class="icon_" @click="toCar">
              <i class="pr iconfont icongouwuchex1">
                <i class="car-num pa" v-if="cart_count">{{cart_count}}</i>
              </i>
              <span>购物车</span>
            </p>
          </van-col>
          <van-col span="3">
            <p class="icon_">
              <i class="iconfont iconkefux1"></i>
              <span>客服</span>
            </p>
          </van-col>
          <van-col span="8">
            <span class="btn text-c" @click="hanldeShowPop">
              加入购物车
            </span>
          </van-col>
          <van-col span="8">
            <span class="btn buy text-c" @click="hanldeShowPop">
              立即购买
            </span>
          </van-col>
        </van-row>
      </div>
     <!--商品导航-->

      <!--弹出层-->
      <!--<van-popup-->
        <!--v-model="showPop"-->
        <!--position="bottom">-->
        <!--<div class="pop-box">-->
          <!--<div class="pop-msg bgcFFF">-->
            <!--&lt;!&ndash;title&ndash;&gt;-->
            <!--<div class="title">-->
              <!--<img :src="imgList[0].path" alt="">-->
              <!--<div>-->
                <!--<p>￥{{price}}</p>-->
                <!--<p>商品名称：商品名称商品名称</p>-->
                <!--<i @click="hanldeShowPop" class="iconfont iconcha"></i>-->
              <!--</div>-->
            <!--</div>-->
            <!--title-->

            <!--cell-->
            <!--<div class="pop-cell bgcFFF">-->
              <!--<div class="color">-->
                <!--<p>颜色</p>-->
                <!--<p>-->
                  <!--<span class="color-span" @click="handleColor(item,index)" v-for="(item, index) in popData.colorList" :key="index">{{item.value}}</span>-->
                <!--</p>-->
              <!--</div>-->
              <!--<div class="type">-->
                <!--<p>规格</p>-->
                <!--<p>-->
                  <!--<span class="type-span" @click="handleType(item,index)" v-for="(item, index) in popData.typeList" :key="index">{{item.value}}</span>-->
                <!--</p>-->
              <!--</div>-->

              <!--<div class="number">-->
                <!--<p>-->
                  <!--<span>数量</span>-->
                  <!--<span>-->
                    <!--<i class="iconfont" @click="handlePlus">+</i>-->
                    <!--<i v-model="choosePopData.num">{{choosePopData.num}}</i>-->
                    <!--<i class="iconfont" @click="handleSubtract">-</i>-->
                  <!--</span>-->
                <!--</p>-->
              <!--</div>-->
            <!--</div>-->
            <!--cell-->
          <!--</div>-->
          <!--<div class="pop-btn text-c">-->
            <!--<span @click="handledAddCar">-->
              <!--加入购物车-->
            <!--</span>-->
            <!--<span @click="handleBuy">-->
              <!--立即购买-->
            <!--</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</van-popup>-->

      <!--参数-->
      <!--<van-popup-->
        <!--style="border-top-left-radius: 12px;border-top-right-radius: 12px;"-->
        <!--v-model="isArguments"-->
        <!--position="bottom">-->
        <!--<div class="arguments-box bgcFFF">-->
          <!--<p class="text-c fs16">产品参数</p>-->
          <!--<div class="msg">-->
            <!--<ul>-->
              <!--<li class="line-bottom">-->
                <!--<span>产品型号</span>-->
                <!--<span>-->
                  <!--<span class="color333">111</span>-->
                <!--</span>-->
              <!--</li>-->
              <!--<li class="line-bottom">-->
                <!--<span>颜色</span>-->
                <!--<span>-->
                  <!--<span class="color333" v-for="(item,index) in saveColorList">红色</span>-->
                <!--</span>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</div>-->
          <!--<div class="btn text-c">-->
            <!--<span class="inline-block text-c" @click="handleCloseArguments">确定</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</van-popup>-->


      <van-popup
        style="border-top-left-radius: 12px;border-top-right-radius: 12px;"
        v-model="isArguments"
        position="bottom">
        <div class="arguments-box coupon-box bgcFFF">
          <p class="text-c fs17 line-bottom">领券</p>
          <div class="msg pdlr15">
            <ul>
              <li class="flex">
                <div class="coupon-left">
                  <p class="">
                    <i class="fs12">￥</i>20<span class="fs15">商品优惠券</span>
                  </p>
                  <p class="fs11">订单金额满2000元可使用</p>
                  <p class="fs11">有效期2020.02.04-2020.03.04</p>
                </div>
                <div class="coupon-right text-c pr">
                  <span class="colorFA7834">立即领取</span>
                  <img class="pa" src="../../assets/img/coupon_get_bg.png" alt="">
                </div>
              </li>
              <li class="flex">
                <div class="coupon-left">
                  <p class="">
                    <i class="fs12">￥</i>20<span class="fs15">商品优惠券</span>
                  </p>
                  <p class="fs11">订单金额满2000元可使用</p>
                  <p class="fs11">有效期2020.02.04-2020.03.04</p>
                </div>
                <div class="coupon-right text-c pr">
                  <span class="colorFA7834">立即领取</span>
                </div>
              </li>
              <li class="flex">
                <div class="coupon-left">
                  <p class="">
                    <i class="fs12">￥</i>20<span class="fs15">商品优惠券</span>
                  </p>
                  <p class="fs11">订单金额满2000元可使用</p>
                  <p class="fs11">有效期2020.02.04-2020.03.04</p>
                </div>
                <div class="coupon-right text-c pr">
                  <span class="colorFA7834">立即领取</span>
                </div>
              </li>
              <li class="flex">
                <div class="coupon-left">
                  <p class="">
                    <i class="fs12">￥</i>20<span class="fs15">商品优惠券</span>
                  </p>
                  <p class="fs11">订单金额满2000元可使用</p>
                  <p class="fs11">有效期2020.02.04-2020.03.04</p>
                </div>
                <div class="coupon-right text-c pr">
                  <span class="colorFA7834">立即领取</span>
                </div>
              </li><li class="flex">
              <div class="coupon-left">
                <p class="">
                  <i class="fs12">￥</i>20<span class="fs15">商品优惠券</span>
                </p>
                <p class="fs11">订单金额满2000元可使用</p>
                <p class="fs11">有效期2020.02.04-2020.03.04</p>
              </div>
              <div class="coupon-right text-c pr">
                <span class="colorFA7834">立即领取</span>
              </div>
            </li>

            </ul>
          </div>
          <div class="btn text-c">
            <span class="inline-block text-c" @click="handleCloseArguments">确定</span>
          </div>
        </div>
      </van-popup>

      <!--弹出层-->
      <Loading :show="isLoading"></Loading>
      <BtnToTop></BtnToTop>
      <BtnToIndex></BtnToIndex>
      <!--new sku-->
      <van-popup
        v-model="showPop"
        position="bottom">
        <div class="pop-box">
          <div class="pop-msg bgcFFF">
            <!--title-->
            <div class="title">
              <img :src="goods.src" alt />
              <div>
                <p>￥{{goods.price}}</p>
                <p>商品名称：{{goods.product_name}}</p>
                <i @click="hanldeShowPop" class="iconfont iconcha"></i>
              </div>
            </div>
            <!--title-->

            <!--cell-->
            <div class="pop-cell bgcFFF">
              <div class="color">
                <p>颜色</p>
                <p>
                  <span class="color-span" @click="newChooseColor(item,index)" v-for="(item, index) in this.newPopupData.product.property[0].value" :key="index">{{item.value}}</span>
                </p>
              </div>
              <div class="type">
                <p>规格</p>
                <p>
                  <span class="type-span" @click="newChooseType(item,index)" v-for="(item, index) in this.newPopupData.product.property[1].value" :key="index">{{item.value}}</span>
                </p>
              </div>
            <!--</div>-->

              <div class="number">
                <p>
                  <span>数量</span>
                  <span>
                    <i class="iconfont" @click="handlePlus">+</i>
                    <i v-model="choosePopData.num">{{choosePopData.num}}</i>
                    <i class="iconfont" @click="handleSubtract">-</i>
                  </span>
                </p>
              </div>
            </div>
            <!--cell-->
          </div>
          <div class="pop-btn text-c">
            <span @click="handledAddCar">
              加入购物车
            </span>
            <span @click="handleBuy">
              立即购买
            </span>
          </div>
        </div>
      </van-popup>
      <!--new sku-->
    </section>
</template>

<script type="text/ecmascript-6">
  import { ImagePreview } from 'vant';
  import Loading from '../../components/Loading.vue'
  import BtnToTop from '../../components/BtnToTop.vue'
  import BtnToIndex from '../../components/BtnToIndex.vue'
  import { tabChange } from '../../assets/js/utils'
  import api from '../../http/api';

  export default {
    components:{
      Loading,BtnToTop,BtnToIndex
    },
    data() {
      return {
        current: 0,//轮播初始值
        isLoading:false,
        imgList:[
          'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
          'http://p7.qhimg.com/t0136089747e6d9017c.jpg'
        ],//轮播图数组
        autoPlay:3000,//轮播图自动播放间隔
        price:0,//现价
        original_price:0,//原价
        product_name:'商品名称',//商品名称
        address:'',//默认地址
        cart_count:0,//加入购物车数量
        points:0,//商品积分
        choose_style:'黑色，1件',//已选规格
        productDetails:'',//商品详情
        property:[],//商品弹窗数据
        isArguments:false,//参数弹窗
        saveColorList:[],

        reviews:{
          list:[
            {text:'有图 100'},
            {text:'好评 100'},
            {text:'中评 100'},
          ],
          total:2684,
          msg:{
            img:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'猜猜我是谁',
            rate:3,
            review:'商品很是可以，很是不错，很是优秀，可以说相当的溜溜溜，非常不错的一次购物体验哟',
            imgList:[
              {src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg'},
              {src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg'},
              {src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg'},
              {src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg'},
              {src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg'},
            ],
            model:'索弗按摩椅-720 瓷灰色'
          }
        },//评论区内容
        recommended:[
          {
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'这是商品名称',
            price:'268.00'
          },
          {
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'这是商品名称',
            price:'268.00'
          },
          {
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'这是商品名称',
            price:'268.00'
          }
        ],//推荐商品
        text:1,
        seckill:false,//是否秒杀进入
        jupmNum:1,//锚点下标
        showPop:false,//弹出层
        popData:{
          src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
          price:'240.00',
          number:'16824210023',
          colorList:[
            {color:'白色'},
            {color:'黑色'},
            {color:'多彩色'},
            {color:'随便什么颜色都行'},
            {color:'随便什么颜色都行'},
            {color:'随便什么颜色都行'},
          ],
          typeList:[
            {size:'S'},
            {size:'M'},
            {size:'X'},
            {size:'L'},
            {size:'XL'},
          ],
        },//弹窗显示数据
        choosePopData:{
          color:'',
          type:'',
          num: 1,
        },//已选择数据
        isCollect:false,//是否已收藏
        collectText:'收藏',//收藏文字
        collectStyle:{
          color:'#7A7B82'
        },//收藏文字颜色
//        isCoupon: false,


        content: {
          open_pop:2,
          open_sucess_pop:2,
          url:"",
          is_activity_product:0,
          is_sales_partner:0,
          is_vip:null,
          product:{
            "id":"74",
            "subhead":"测试新会员分成商品2",
            "name":"测试新会员分成商品2",
            "model":"测试新会员分成商品2",
            "original_price":"20.00",
            "discount_price":"5.00",
            "content":"<p>啊啊啊</p>",
            "points":"0",
            "slide_id":"1818",
            "is_limit":"0",
            "limit_count":null,
            "is_show":"1",
            "salt":"K5eqYf",
            "sales_volume":"35",
            "vip_price":"1.00",
            "picurl":[
              {
                "id":"1818",
                "path":"https://itshop.sofoshare.com/Uploads/Picture/pad/5f523f72a443d.png"
              }
            ],
            "property":[
              {
                "id":"1",
                "name":"颜色",
                "value":[
                  {
                    "vid":"91",
                    "pid":"1",
                    "value":"五彩斑斓",
                    "status":"1"
                  },
                  {
                    "vid":"94",
                    "pid":"1",
                    "value":"原谅绿",
                    "status":"1"
                  }
                ]
              },
              {
                "id":"2",
                "name":"规格",
                "value":[
                  {
                    "vid":"92",
                    "pid":"2",
                    "value":"很大",
                    "status":"1"
                  },
                  {
                    "vid":"95",
                    "pid":"2",
                    "value":"很小",
                    "status":"1"
                  }
                ]
              }
            ],
            "bought":0
          },
          product_sku:[
            {
              "sku_id":"131",
              "product_id":"74",
              "properties":"91:92",
              "quantity":"969",
              "price":"20.00",
              "discount_price":"5.00",
              "counterfeit_sales":"0",
              "sale_volume":"31",
              "is_delete":"0",
              "vip_price":"4.00"
            },
            {
              "sku_id":"133",
              "product_id":"74",
              "properties":"94:95",
              "quantity":"996",
              "price":"15.00",
              "discount_price":"4.00",
              "counterfeit_sales":"0",
              "sale_volume":"4",
              "is_delete":"0",
              "vip_price":"3.00"
            }
          ],
          is_collect:0,
          cart_count:null,
          recommend:[
            {
              "id":"12",
              "name":"按摩垫 多功能按摩组合 轻巧灵便 揉捏捶打 家用豪华靠垫",
              "original_price":"3980.00",
              "discount_price":"0.10",
              "slide_id":"1096",
              "slide_url":"https://itshop.sofoshare.com/Uploads/Picture/pad/5d098f512d844.jpg"
            },
            {
              "id":"15",
              "name":"肩颈多功能按摩器  颈部腰部背部 穴位多功能 全身家用车载",
              "original_price":"398.00",
              "discount_price":"99.00",
              "slide_id":"1117",
              "slide_url":"https://itshop.sofoshare.com/Uploads/Picture/pad/5d1064e7ce7c8.jpg"
            },
            {
              "id":"20",
              "name":"舒享按摩椅 3D按摩机芯 全自动多功能 独创摇摇椅设计 全身按摩",
              "original_price":"7980.00",
              "discount_price":"2990.00",
              "slide_id":"1087,1088",
              "slide_url":"https://itshop.sofoshare.com/Uploads/Picture/pad/5d098e241eb5f.jpg"
            }
          ],
          address:"",
          signPackage:{
            "appId":"wxf5f9b38eb55dd70a",
            "nonceStr":"jUnpEnsmc9gdvqEo",
            "timestamp":1600920189,
            "url":null,
            "signature":"0cd536cdf306db8f2b38ebba53ba94f0f1d7b133",
            "rawString":"jsapi_ticket=LIKLckvwlJT9cWIhEQTwfDt1s1qKU0rqCJcUTpE5wNa9clkW-RFBeV-nNtF_Fkd3h_xe5XQTeWX_rg2FX12DkA&noncestr=jUnpEnsmc9gdvqEo×tamp=1600920189&url=",
            "desc":"啊啊啊",
            "imgUrl":"https://itshop.sofoshare.com/Uploads/Picture/pad/5f523f72a443d.png"
          },
          appShare:{
            "title":"测试新会员分成商品2",
            "summary":"啊啊啊",
            "imageUrl":"https://itshop.sofoshare.com/Uploads/Picture/pad/5f523f72a443d.png",
            "url":null
          },
          comment_data:{
            "data":[

            ],
            "amount":{
              "img":"0",
              "good":"0",
              "ordinary":"0",
              "bad":"0"
            }
          },
          coupon_title:"快来领券呀"
        },
        newPopupData: {},
        goods: {
          price: "",
          product_name: "",
          src: "",
        }, //商品弹窗数据
        popData: {
          colorList: [],
          typeList: [],
        }, //弹窗显示数据
        sizeList: [],
        selectedNum: 1, //选中数量
        newProductSkuListArr: [],
        colorList: [],
        typeList: [],
      }
    },
    created() {
      this.isLoading = true
      this.initData()
      this.$nextTick(function() {
        $('.lunbo').css('height',$('body').width())
        $('.lunbo img').css('height',$('body').width())

        $('.review-img img').css('height',$('.review-img img').width())
        $('.product-box img').css('height',$('.product-box img').width())
      })

      this.newPopupData = this.content
      this.goods = {
        price: this.content.product.discount_price,
        product_name: this.content.product.name,
        src: this.content.product.picurl[0].path,
      }

      let newArr = [];
      for (let i = 0, len = this.content.product_sku.length; i < len; i++) {
        newArr[this.content.product_sku[i].properties.replace(/:/g, "a")] =
          this.content.product_sku[i];
        this.colorList[i] = this.content.product_sku[i].properties.split(':')[0]
        this.typeList[i] = this.content.product_sku[i].properties.split(':')[1]
      }
      this.newProductSkuListArr = newArr;
      console.log(this.newProductSkuListArr);
      console.log(this.colorList);
      console.log(this.typeList);

    },
    watch:{
      '$route':function(to, from){
        this.initData()
      }
    },
    mounted() {
      window.addEventListener('scroll',this.handleScroll,false)
    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll, false)
    },
    methods: {
      newChooseColor(item, index) {
        $('.color-span').eq(index).addClass('cell-active cell-active-border').siblings().removeClass('cell-active cell-active-border')
          this.typeList.map((id, indx) => {
            if(this.newProductSkuListArr[item.vid+'a'+id]) {

              console.log(this.newProductSkuListArr[item.vid + 'a' + id], item.vid+'a'+id);
              $('.type-span').eq(indx).removeClass('cell-none')

            } else {
              $('.type-span').eq(indx).addClass('cell-none').removeClass('cell-active')
            }
          })
      },
      newChooseType(item, index) {
        $('.type-span').eq(index).addClass('cell-active cell-active-border').siblings().removeClass('cell-active cell-active-border')
        this.colorList.map((id, indx) => {
          if(this.newProductSkuListArr[id+'a'+item.vid]) {

            console.log(this.newProductSkuListArr[id+'a'+item.vid], id+'a'+item.vid);
            $('.color-span').eq(indx).removeClass('cell-none')

          } else {
            $('.color-span').eq(indx).addClass('cell-none').removeClass('cell-active')
          }
        })
      },
      initData(){
        this.$ajax({
          url: api.getOneProduct,
          method:'get'
        },{
          id:this.$route.query.id,
        }).then(res => {
          this.isLoading = false
          console.log('res--', res);

//          let data = res.data.content
//          this.imgList = data.product.picurl
//          this.price = data.product.discount_price
//          this.original_price = data.product.original_price
//          this.product_name = data.product.name
//          this.productDetails = data.product.content
//          this.address = data.address
//          this.points = data.product.points
//          this.isCollect = data.is_collect
//          this.popData.colorList = data.product.property[0].value
//          this.popData.typeList = data.product.property[1].value
//          this.recommended = data.recommend



        })
      },
      //为你推荐
      handleToRecommendProductList(){
        console.log('为你推荐');
        this.$router.push({
          name:'recommendProductList'
        })
      },
      handleScroll(event){
        event.preventDefault();
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop < 100){
          $('.nav').css(
            {'opacity':'0'})
        }else if(scrollTop > 100 && scrollTop < 110){
          $('.nav').css(
            {'opacity':'0.2'})
        }else if(scrollTop > 111 && scrollTop < 120){
          $('.nav').css(
            {'opacity':'0.5'})
        }else if(scrollTop > 121 && scrollTop < 130){
          $('.nav').css(
            {'opacity':'0.8'})
        }else if(scrollTop > 130){
          $('.nav').css(
            {'opacity':'1'})
        }

        for (let i = 0,len = this.classifyList.length; i < len; i++) {
          if($('#scroll' + i).offset().top <= scrollTop+44){
            this.jupmNum = i
          }
        }
      },
      //锚点跳转
      handleJ(index,id){
        let scrollH = 0;
        this.jupmNum = index;
        scrollH = $(id).offset().top == 0 ? 0 : ($(id).offset().top - 40)
        $('html ,body').animate({scrollTop: scrollH}, 300);
      },
      //跳转到评论列表页
      handleToReviews(){
        console.log('跳转到评论列表页');
      },
      //预览
      handleImgPreview(index){
        let arr = [];
        for (let i = 0; i < this.reviews.msg.imgList.length; i++) {
          arr[i] = this.reviews.msg.imgList[i].src
        }
        ImagePreview({
          images: arr,
          startPosition: index,
          onClose() {
            // do something
          }
        });
      },
      //购买，加入购物车弹出层
      hanldeShowPop(){
        this.showPop = !this.showPop

      },
      //查看参数
      handleArguments(){
        this.isArguments = true
      },
      handleCloseArguments() {
        this.isArguments = false
      },
      // 领券
      hanldeShowCouponPop() {
//        this.isCoupon = true
      },
//      handleCloseCoupon() {
//        this.isCoupon = false
//      },
      //选择颜色
      handleColor(item,index){
        $('.color-span').eq(index).addClass('cell-active').siblings().removeClass('cell-active')
        this.choosePopData.color = item.value;
        this.$ajax({
//          url:api.
          method:'get',
        },{
          id:'1',
          pid:item.pid
          }).then(res => {
          console.log('color--', res);
        })
      },
      //选择规格
      handleType(item,index){
        $('.type-span').eq(index).addClass('cell-active').siblings().removeClass('cell-active')
        this.choosePopData.type = item.value;
        this.$ajax({
//          url:api.
          method:'get',
        },{
          id:'2',
          pid:item.pid
        }).then(res => {
          console.log('type--', res);
        })
      },
      //加
      handlePlus(){
        this.choosePopData.num++;
      },
      //减
      handleSubtract(){
        if(this.choosePopData.num == 1){
          return false;
        }else{
          this.choosePopData.num--;
        }
      },
      //加入购物车
      handledAddCar(){

        if(this.choosePopData.color == ''){
          this.$toast('请选择颜色后添加');
        }else if(this.choosePopData.type == ''){
          this.$toast('请选择规格后添加');
        }else{
          this.$toast.success('添加成功');
          this.showPop = !this.showPop

        }

      },
      //立即购买
      handleBuy(){
        console.log('立即购买');
        this.$router.push({
          name:'orderConfirmation',

        })
      },
      handleToProduct(item){
        this.$router.push({
          path:'/index/web/productDetail',
          query:{id:item.id}
        })
      },
      //跳转到购物车
      toCar(){
        this.$router.push({
          path:tabChange(2),
        });
      },
      //收藏
      handleCollect(){
        this.isCollect = !this.isCollect;
        this.collectStyle.color = this.isCollect ? '#7E82F6' : '#7A7B82';
        this.collectText = this.isCollect ? '已收藏' : '收藏';
      },
    },
  }
</script>

<style lang="scss">
  @import "../../assets/css/productDeatail.scss";
</style>
